@extends('WShop::layout')
<style>
    .huati_btn {
        width: 175px;
        height: 32px;
        background: #34a0f0;
        border-radius: 3px;
        font: 14px/32px "微软雅黑";
        display: block;
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        text-decoration: none;
    }

    .huati {
        height: 40px;
        padding-top: 9px;
        border-bottom: 1px dashed #cecece
    }

    .tit a span {
        color: #34a0f0
    }

    .story {
        border-bottom: 1px dashed #cecece;
        padding: 0 15px 3px;
    }

    .story_t {
        font-size: 14px;
        color: #313131;
        padding-top: 5px
    }

    .story_m {
        color: #868686;
        line-height: 21px;
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
    }

    .story_time {
        text-align: right;
        color: #868686;
    }
    .lookreply{
        background-color: steelblue;
        color: #ffffff;
    }
    .delete-message{
        background-color: crimson;
        color: #ffffff;
    }
    .replybtn{
        background-color: darkgreen;
        color: #ffffff;
    }
    .img-list .img-item {
        margin-right: 10px;
        display: inline-block;
    }
</style>
@section('content')
    @include('WShop::public.header')
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron  ">
                <div class="mui-fenlei-li" style="background: #4987fe;">
                    <ul class="mui-list-unstyled mui-clearfix">

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message_index',['type'=>'inbox'])}}"
                               class="@if('inbox' == ($type ?? 1)) mui-text-bai @endif">收件箱
                            </a>
                        </li>

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message_index',['type'=>'outbox'])}}"
                               class="@if('outbox' == ($type ?? 1)) mui-text-bai @endif">发件箱
                            </a>
                        </li>

                        <li style="width: 33.33%;border-right: 1px solid #DDDDDD">
                            <a style="text-align: center" href="{{route('f_Wap_message-addMsg',['type'=>'add'])}}"
                               class="@if('add' == ($type ?? 1)) mui-text-bai @endif">发消息
                            </a>
                        </li>

                    </ul>
                </div>

                <div class="mui-zhuda">

                    <div class="mui-dingdan-list">
                        <div class="mui-list-unstyled mui-clearfix tabslider yb-ul" id="pull-load">

                            @if($list->isNotEmpty())

                                @foreach($list as $item)

                                    <div class="story">

                                        <p class="story_t">

                                            {{$item->title}}

                                        </p>

                                        <p class="story_m">
                                            {{$item->content}}
                                        </p>

                                        @if(isset($item->msg_img))
                                            <div class="img-list">
                                                @foreach(str2arr($item->msg_img) as $img)
                                                    <div class="img-item">
                                                        <img src="{{$img}}" width="50px" >
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif

                                        <p class="story_time">

                                        <span class="tagdef" style="color: #286AC0;"><img
                                                    src="{{asset(config('view.frontend.wap_login').'/images/user_icon.png')}}"
                                                    width="17">@if($item->fromUser){{$item->fromUser['real_name']}}@else
                                                公司@endif</span> {{$item->created_at}}

                                        </p>

                                        <p class="story_time">
                                                   <span>

                                            @if($type=='inbox')
                                                           @if($item->is_reply)
                                                               <button class="lookreply"
                                                                       data-content="{{$item->reply}}" data-reply-img ="{{$item->reply_img}}">查看回复</button>
                                                           @else
                                                               <button class="replybtn" type="button" id="{{$item->id}}">回复</button>
                                                           @endif
                                                       @else
                                                           @if($item->is_reply)
                                                               <button class="lookreply"
                                                                       data-content="{{$item->reply}}" data-reply-img ="{{$item->reply_img}}">查看回复</button>
                                                           @else
                                                               <button class="" disabled>暂无回复</button>
                                                           @endif
                                                       @endif
                                                       <button class="delete-message" data-type="{{$type}}"
                                                               data-msgid="{{$item->id}}"
                                                               data-url="{{route('f_Wap_message-delete')}}">删除</button>
                                         </span>
                                        </p>
                                    </div>

                                @endforeach
                                @else
                                    <div style="height: 110px;"></div>
                                    <div class="mui-text-center">
                                        <img src="{{asset(config('mall.wap_assets1').'/images/empty.png')}}" alt="" width="200">
                                        <p style="margin-top: 50px;"><a href="javascript:void(0);" style="color: #fff;border: 1px solid #8a96a2;padding: 8px 24px;border-radius: 16px;background: #8a96a2;">暂无数据</a></p>
                                    </div>
                            @endif

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('WShop::public.foot_bar')
@endsection
@push('scripts')
<script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
<script type="text/javascript">
    //查看回复
    mui("body").on('tap',".lookreply",function () {

        var BatchSend = [] ;
        var msg_url = '';

        var reply_img = $(this).data('reply-img');

        if(reply_img){
            if (reply_img.substr(0,1)==',') reply_img = reply_img .substr(1);
            BatchSend = reply_img.split(",") ;
            for(var j = 0; j < BatchSend.length; j++){
                msg_url += '<div class="img-item"><img src="'+BatchSend[j]+'" width="50px"></div>'
            }
        }
        var content = "&nbsp;&nbsp;&nbsp;&nbsp;"+$(this).data('content');
        var html = "<div style='margin: 20px 20px'>"+content+"</div>";
            html += msg_url;

        layer.open({
            title: [
                '回复',
                'background-color: #1b2c4b; color:#fff;'
            ],
            content: html
        });

    })

    mui("body").on('tap','.delete-message',function () {
        var thisObj=$(this);
        layer.open({
            content: '您确定要删除这条留言信息？'
            ,btn: ['是的', '取消']
            ,yes: function(index){
                layer.close(index);
                layer.open({
                    type: 2
                    ,content: '加载中'
                });
                var msgid=thisObj.data('msgid');
                var type=thisObj.data('type');
                $.ajax({
                    type: 'post',
                    url: thisObj.data('url'),
                    dataType: 'json',
                    data: {message_id:msgid,type:type,'_token':'{{csrf_token()}}'}
                }).done(function (response) {
                    layer.closeAll('loading');
                    if (response.status) {
                        mui.toast(response.msg);
                        setTimeout(function () {
                            location.href = response.url;
                        }, 2000);
                    } else {
                        mui.toast(response.msg);
                    }
                }).fail(function (XMLHttpRequest) {
                    layer.closeAll('loading');
                    if (XMLHttpRequest.status == 422) {
                        mui.toast(XMLHttpRequest.responseJSON.msg);
                    } else {
                        mui.toast('网络异常,请检查连接');
                    }

                }).always(function () {

                });

            }
        });
    })

    mui("body").on('tap','.replybtn',function () {
        var id=$(this).attr('id');
        layer.open({
            title: [
                '请输入回复内容',
                'background-color:#1b8cec; color:#fff;'
            ]
            ,anim: 'up'
            ,content: '<textarea name="reply_content" id="reply_content" style="border:0;border-radius:5px;background-color:rgba(241,241,241,.98);width: 100%;height: 100px;padding: 10px;resize: none;" placeholder="输入回复内容。。。"></textarea>'
            ,btn: ['确认', '取消']
            ,yes: function(index){
                var info = $('#reply_content').val();
                if(!info){
                    layer.open({
                        content: '请输入回复内容',
                        skin: 'msg',
                        time: 2
                    });
                    return false;
                }
                if(info.length > 200){
                    layer.open({
                        content: '回复内容不能超过200个字符',
                        skin: 'msg',
                        time: 2
                    });
                    return false;
                }
                $.post("{{route('f_Wap_message-reply')}}",{'id':id,'content':info,'_token':'{{csrf_token()}}'},function (data){
                    if(data.status){
                        mui.toast(data.msg);
                        setTimeout(function (){
                            location.href=data.url;
                        },1500);
                        layer.close(index);
                    }else{
                        mui.toast(data.msg);
                        layer.close(index);
                    }
                });
            }
        });
    });

</script>
<script>
    var type = $.trim("{{$type}}");
    var goodsItemTpl = '<div class="story">' +
        '<p class="story_t">{%title%}</p>'+
        '<p class="story_m">{%content%}</p>'+
        ' <div class="img-list">{%msg_img%}</div>'+
        '<p class="story_time"><span class="tagdef" style="color: #286AC0;">{%imgurl%}{%user_text%}</span>{%created_at%}</p>' +
        ' <p class="story_time"><span>{%button_info%}{%button_del%}</span></p>'+
        '</div>'

    var pageNum = 1;

    mui.init({
        pullRefresh : {
            container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            up : {
                style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                height: '50px',//可选,默认50px.下拉刷新控件的高度,
                range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                auto: false,//可选,默认false.首次加载自动上拉刷新一次
                callback: function () {
                    pageNum = pageNum+1;
                    url = handleUrl(pageNum);
                    $.ajax({
                        type: 'get',
                        url: url,
                        dataType: 'json',
                    }).done(function (response) {
                        if(response.status){
                            data = response.data.list;
                            var len = data.length;
                            if(len<1){
                                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                return true;
                            }
                            for (var i=0; i<len; i++){

                                var goodsItem = goodsItemTpl;

                                var imgurl = '<img src="{{asset(config('view.frontend.wap_login').'/images/user_icon.png')}}" width="17">';

                                var user_text = '';
                                if(data[i]['fromUser']){
                                   var user_text = data[i]['fromUser']['real_name'];
                                }else{
                                    var user_text = '公司';
                                }


                                if(type == 'outbox'){

                                    if(data[i]['is_reply']){
                                        var   button_info = '<button class="lookreply" data-content="'+data[i]['reply']+'">查看回复</button>'
                                    }else{
                                        var   button_info ='<button class="" disabled>暂无回复</button>';
                                    }

                                }else{
                                  if(data[i]['is_reply']){
                                      var   button_info = '<button class="lookreply" data-content="'+data[i]['reply']+'">查看回复</button>'
                                  }else{
                                      var   button_info ='<button class="replybtn" type="button" id="'+data[i]['id']+'">回复</button>';
                                  }
                                }
                                var BatchSend = [] ;
                                var msg_url = '';
                                if(data[i]['msg_img']){
                                    if (data[i]['msg_img'].substr(0,1)==',') data[i]['msg_img'] =data[i]['msg_img'] .substr(1);
                                    BatchSend = data[i]['msg_img'].split(",") ;
                                    for(var j = 0; j < BatchSend.length; j++){
                                        msg_url += '<div class="img-item"><img src="'+BatchSend[j]+'" width="50px"></div>'
                                    }
                                }

                                var button_del = '<button class="delete-message" data-type="'+type+'"data-msgid="'+data[i]['id']+'"data-url="{{route('f_Wap_message-delete')}}">删除</button>';

                                goodsItem = goodsItem.replace('{%user_text%}',user_text).replace('{%imgurl%}',imgurl)
                                    .replace('{%created_at%}',dayjs(parseInt(data[i]['created_at'])*1000).format('YYYY-MM-DD HH:mm:ss'))
                                    .replace('{%title%}',data[i]['title'])
                                    .replace('{%button_del%}',button_del)
                                    .replace('{%button_info%}',button_info)
                                    .replace('{%content%}',data[i]['content'])
                                    .replace('{%msg_img%}',msg_url)
                                $("#pull-load").append(goodsItem);
                                showImg()
                            }
                        }
                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                        mui('#pullrefresh').pullRefresh().refresh(true);

                    }).fail(function (XMLHttpRequest) {
                        tooltips('网络异常,请检查连接');

                    }).always(function () {

                    });

                }
            }
        }
    });

    function handleUrl(pageNum) {
        var url = window.location.href;
        if(url.indexOf("page_num=") >= 1){
            var u = url.split("page_num=");
        }else{
            if(url.indexOf("?") >= 1){
                url = url+"&page_num="+pageNum;
            }else{
                url = url+"?page_num="+pageNum;
            }
        }
        if(u) {
            var e = u[1].split("&");
            var d="";
            if(e.length > 1){
                for(var i=0;i<e.length-1;i++){
                    d += "&"+e[i+1];
                }
            }
            var url = u[0] + "page_num=" + pageNum+d;
        }

        return url
    }

</script>

<script>
    function showImg(){
        $('.img-list .img-item').each(function () {
            this.addEventListener('tap',function () {
                var img_src = $(this).find("img").attr("src");
                var html = "<div style='margin:0 auto;'><img style='width: 150px;height: 150px;' src="+img_src+" ></div>"
                layer.open({
                    title: [
                        '查看图片',
                        'background-color: #1b2c4b; color:#fff;'
                    ],
                    content: html
                });
            });
        });
    }
    showImg()
</script>
@endpush
